<html>
<head>
	<title></title>
	<style type="text/css">

#map-canvas {
	background: #333;
	height: 400px;
	width: 600px;
}

#map-canvas img { width: auto; display:inline; max-width: none; }
</style>
	<script src="/js/jquery-1.9.1.min.js"></script>
		<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
		<script>
var almaty = new google.maps.LatLng(51.161476109040386, 71.4451219643554);
var almatymarker = new google.maps.LatLng(51.161476109040386, 71.4451219643554);
var marker;
var map;

function initialize() {
  var mapOptions = {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: almaty
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

  marker = new google.maps.Marker({
    map:map,
    draggable:true,
    animation: google.maps.Animation.DROP,
    position: almatymarker
  });
  google.maps.event.addListener(marker, 'click', toggleBounce);
  google.maps.event.addListener(marker, 'drag', markerSave);
}

function toggleBounce() {

  if (marker.getAnimation() != null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

	      function markerSave() {
	      	$("#pos").val(marker.position);
	      }

google.maps.event.addDomListener(window, 'load', initialize);
		</script>
</head>
<body>

			    	<div id="map-canvas"></div>
			    		<b>Координаты:</b> <input type="text" name="crds" id="pos"> <br />
</body>
</html>